<!DOCTYPE html>
<html lang="en">

	<head><link rel="shortcut icon" href="http://likexia.gitee.io/tools/lib/img/h5.png" type="image/x-icon">
		<meta charset="utf-8">

		<title>jQuery UI Touch Punch - Mobile Device Touch Event Support for jQuery UI</title>

		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="description" content="">
		<meta name="author" content="">

		<!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

		<link rel="shortcut icon" href="/ico/favicon.ico">
		<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/ico/apple-touch-icon-114-precomposed.png">
		<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/ico/apple-touch-icon-72-precomposed.png">
		<link rel="apple-touch-icon-precomposed" href="/ico/apple-touch-icon-57-precomposed.png">

		<style>
			body {
				background: #fff;
				font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
			}
		</style>

		<link href="http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/css/base/jquery.ui.all.css" rel="stylesheet">
		<link href="http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.2/css/lightness/jquery-ui-1.10.2.custom.min.css" rel="stylesheet">
		<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
		<script src="http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
		<script src="http://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.2/jquery.ui.touch-punch.min.js"></script>
	</head>

	<body>

		<div class="container">

			<style>
				#draggable {
					width: 100px;
					height: 100px;
					padding: 0.5em;
					float: left;
					margin: 10px 10px 10px 0;
				}
				#droppable {
					width: 150px;
					height: 150px;
					padding: 0.5em;
					float: left;
					margin: 10px;
				}
			</style>
			<script>
				$(function() {
					$("#draggable").draggable();
					$("#droppable").droppable({
						drop: function(event, ui) {
							$(this)
								.addClass("ui-state-highlight")
								.find("p")
								.html("Dropped!");
							setTimeout(resetPosition(), 100);
						}
					});
					setInterval(resetPosition(), 100);
					
					function resetPosition() {
						var left = $("#draggable").offset().left;
						var top=$("#draggable").offset().top;
						var bodyWidth=$(window).width();
						var bodyHeight=$(window).height();
						//判断是否到了边界
						console.log(left);
						console.log(top);
						console.log(bodyWidth);
						console.log(bodyHeight);
						if(left<0){
							$("#draggable").css("left","0");
						}
						$("#draggable").css({
							"left": "0",
							"top": "0",
						});
					}
				});
			</script>

			<div class="demo">

				<div id="draggable" class="ui-widget-content">
					<p>Drag me to my target</p>
				</div>

				<div id="droppable" class="ui-widget-header">
					<p>Drop here</p>
				</div>

			</div>
			<!-- End demo -->

			<div class="demo-description" style="display: none; ">
				<p>Enable any DOM element to be droppable, a target for draggable elements.</p>
			</div>
			<!-- End demo-description -->

		</div>

	</body>

</html>